html,body,div,span,p,h1,h2,h3,h4,h5,h6,ul,li,i,:after,:before{
	padding: 0;
	border: 0;
	margin: 0;
	outline: 0;
	box-sizing: border-box;
}

body{
	background-image: url(images/city.jpg);
	background-repeat:no-repeat; 
	perspective:1200px;
}
i{
	display: block;
	width: 64px;
	height: 64px;
	position: absolute;
	left: 118px;
	top:100px;
	background-repeat: no-repeat;
}
h5{
	position: absolute;
	left: 98px;
	top:60px;
}
.box{
	width: 300px;
	height: 300px;
	position: relative;
	margin:200px auto 0;
	border: 1px solid #eee;
	transform: rotate3d(1,1,1,30deg);
	transform-style:preserve-3d;
	perspective-origin: center center;
	animation: box 5s linear infinite;
}
.box:hover{
	animation-play-state:paused;
}
.box div{
	color: snow;
	text-align: center;
	line-height: 300px;
	font-size: 40px;
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 300px;
}
.down{
	background-color: red;
	// transform-origin: bottom center;
}
.down i{
	background-image: url(images/film.png);
}
.up{
	background-color: green;
	transform:translateZ(300px);
}
.up i{
	background-image: url(images/music.png);
}
.left{
	background-color: #666;
	transform-origin:left center;
	transform:rotateY(-90deg);
}
.left i{
	background-image: url(images/Sport.png);
}
.right{
	background-color: blue;
	transform-origin:right center;
	transform:rotateY(90deg);
}
.right i{
	background-image: url(images/game.png);
}
.front{
	background-color: pink;
	transform-origin:bottom center;
	transform:rotateX(-90deg);
}
.front i{
	background-image: url(images/cate.png);
}
.behind{
	background-color: purple;
	transform-origin:top center;
	transform:rotateX(90deg)
}
.behind i{
	background-image: url(images/shop.png);
}
@keyframes box{
	from{
		transform: rotate3d(1, 1, 1, 0);
	}
	to{
		transform: rotate3d(1, 1, 1, 360deg)
	}
}